<script setup>
import {ref} from 'vue'
import {onShareAppMessage,onShareTimeline,onLoad} from '@dcloudio/uni-app'


const name=ref('username')
	

onLoad(()=>{
	const username=uni.getStorageSync('username')
	if(!username)return 
	name.value=username
})

onShareAppMessage((e)=>{
		
		return {
			title:"智途安行",
			path:"/pages/index/index"
		}
	})
	//分享朋友圈
	onShareTimeline(()=>{
		return {
			title:"666",
			imageUrl:"/static/logo.png"
		}
	})
	
	const exit=()=>{
		
		uni.showToast({
			title:"成功退出",
			icon:"success"
		})
		
		uni.clearStorageSync("token")
		setTimeout(()=>{
			uni.redirectTo({
				url:'/pages/login/login',
				
			})
		},1000)
	   
	}
	//跳转会员中心
	const To=(goal)=>{
		if(goal==='')return 
		uni.navigateTo({
			url:`/pages/more/${goal}`
		})
	}
	
	

	
</script>


<template>
<view class="background pageBg"><image src="../../static/backgroud.png"></image></view>
 <view class="userContainer">
	
 	<view class="header">
 		<view class="img"><image src="../../static/avatar.png"></image></view>
 		<view class="imfor">
 		    <view class="name">{{name}}</view>
 		    <view class="stats-container">
 		        <view class="stat-item" @tap="To('')">
 		            <view class="stat-number">2</view>
 		            <view class="stat-label">
 		                <image src="../../static/history.png" class="stat-icon"/>
 		                历史记录
 		            </view>
 		        </view>
 		        <view class="divider"></view>
 		        <view class="stat-item" @tap="To('myMsg')">
 		            <view class="stat-number">5</view>
 		            <view class="stat-label">
 		                <image src="../../static/消息.png" class="stat-icon"/>
 		                我的消息
 		            </view>
 		        </view>
 		    </view>
 		</view>
		
 	</view>
	
	<view class="section">
		<view class="list">
		
			
			<view class="row" @tap="To('pointStore')">
				<view class="left">
					<view class="img"><image src="../../static/积分商城.png"></image></view>
					<view class="text">积分商城</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<view class="img"><image src="../../static/arrow-right.png"></image></view>
				</view>
							
			</view>
			
			<view></view>
				
			<view class="row" @tap="To('aboutUs')">
				<view class="left">
					<view class="img"><image src="../../static/about-us.png"></image></view>
					<view class="text">关于我们</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<view class="img"><image src="../../static/arrow-right.png"></image></view>
				</view>
							
			</view>
			
			<view class="row" >
				<view class="left">
					<view class="img"><image src="../../static/service.png"></image></view>
					<view class="text">联系客服</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<view class="img"><image src="../../static/arrow-right.png"></image></view>
				</view>
				<button class="contactService" open-type="contact">联系客服</button>
							
			</view>
					
			<view class="row" @tap="To('setting')">
				<view class="left">
					<view class="img"><image src="../../static/设置.png"></image></view>
					<view class="text">设置中心</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<view class="img"><image src="../../static/arrow-right.png"></image></view>
				</view>
							
			</view>
			<view class="row" @tap="To('ideal')">
				<view class="left">
					<view class="img"><image src="../../static/private-deal.png"></image></view>
					<view class="text">用户隐私协议</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<view class="img"><image src="../../static/arrow-right.png"></image></view>
				</view>
							
			</view>
					
		</view>
	</view>
	
	<view class="exit" @tap="exit"><button>退出登录</button></view>
</view>
</template>


<style lang="scss" scoped>
	.stats-container {
	    display: flex;
	    align-items: center;
	    justify-content: space-around;
	    background: rgba(255, 255, 255, 0.9);
	    border-radius: 16rpx;
	    padding: 20rpx 0;
	    margin: 30rpx 0;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	    
	    .stat-item {
	        text-align: center;
	        padding: 0 40rpx;
	        position: relative;
	        
	        .stat-number {
	            font-size: 44rpx;
	            font-weight: 600;
	            color: #50B088;
	            margin-bottom: 10rpx;
	        }
	        
	        .stat-label {
	            font-size: 28rpx;
	            color: #666;
	            display: flex;
	            align-items: center;
	            gap: 8rpx;
	            
	            .stat-icon {
	                width: 36rpx;
	                height: 36rpx;
	                opacity: 0.8;
	            }
	        }
	    }
	    
	    .divider {
	        width: 1rpx;
	        height: 60rpx;
	        background: #eee;
	    }
	}

	.pageBg{
		background: 
		linear-gradient(to bottom,transparent ,#fff 400rpx),
		linear-gradient(to right,#beecd8 20%,#F4E2D8);
		height: 100vh;
	}
	.background{
		width: 1000rpx;
		height: 1500rpx;
		position: absolute;
		z-index: -1;
		top:0;
		image{
			width: 100%;
			height: 100%;
			opacity: 0.3;
			
			
		}
	}
	.contactService{
		position: absolute;
		width: 100%;
		left: 0;
		top: 840rpx;
		opacity: 0;
	}
	.exit{
		button{
			width: 100%;
			color: rgb(80, 176, 136);
		}
	}
	
	.section{
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		.list{
			.row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 100rpx;
				background: #fff;
				border-bottom: 1px solid #eee;
				&:last-child{border-bottom: 0;}
				.left{
					display: flex;
					align-items: center;
					.text{
						padding-left: 20rpx;
						color: #666;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.text{
						font-size: 28rpx;
						color: #aaa;
					}
				}
			}
		}
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.userContainer{
		.reconfig{
			margin-top: 25rpx;
		}
		.header{
			margin: 100rpx;
			text-align: center;
			flex-direction: column;
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
			.name{
				font-size: 28rpx;
				margin-top: 15rpx;
				margin-bottom: 30rpx;
			}
			.imfor{
				
				.tip{
					margin-left: -65rpx;
					display: flex;
					view{
						margin-left: 85rpx;
						border-radius: 10rpx;
						box-shadow: #beecd8;
						width: 150rpx;
						height: 50rpx;
					}
					.number{
						color:rgb(80, 176, 136)
					}
					.word{
						color:skyblue
					}
				}
			}
			
			
		}
	}
	
</style>
